<template>
    <div class="app-container">
        <div class="layout-content">
            <van-tabs v-model="active">
                <van-tab v-for="(item, index) in list" :title="item.title" :key="index">
                    <DataList :url="item.urlList" :key="item.urlList">
                        <template v-slot:scopeData="scopeData">
                            <div class="cell_class">
                                <div class="cell_header">
                                    <h5 @click="routerClick(scopeData.item)">
                                        <div>{{ scopeData.item.title }}</div>
                                    </h5>
                                    <van-divider :margin="12"></van-divider>
                                    <p>
                                        <span class="circular" :style="`background:${scopeData.item.isSuspended ? 'orange' : '#1e80ff'
                                            }`"></span>
                                        <!-- 待办事项 -->
                                        <span v-if="scopeData.item.isSuspended_dictText">{{
                                            scopeData.item.isSuspended_dictText
                                        }}</span>
                                        <!-- 已办事项 -->
                                        <span v-if="scopeData.item.deleteReason">{{
                                            scopeData.item.deleteReason
                                        }}</span>
                                    </p>
                                </div>
                                <div class="cell_content">
                                    <p>
                                        <span>申请人:{{ scopeData.item.applyer }}</span>
                                    </p>
                                    <p>
                                        <span>申请日期:{{ scopeData.item.createTime }}</span>
                                    </p>
                                    <div v-if="scopeData.item.isSuspended_dictText">
                                        <van-button @click="handleAudit(scopeData.item)" type="info">同意</van-button>
                                        <van-button @click="handleRefuse(scopeData.item)"
                                            class="button_refuse">拒绝</van-button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </DataList>
                </van-tab>
            </van-tabs>
        </div>
        <div class="layout-footer">
            <TabBar :activeTab="1"></TabBar>
        </div>
        <!-- 输入框 -->
        <workbenchesDialog :show="show" :title="title" @handleConfirm="handleConfirm" @handleCancel="show = false">
        </workbenchesDialog>
    </div>
</template>

<script>
import TabBar from "@/components/TabBar";
import DataList from "../components/DataList";
import workbenchesDialog from "../components/workbenchesDialog";
import { mapActions } from "vuex";

import { postAction } from '@/api/manage'
import { Notify, Dialog } from 'vant';

export default {
    mixins: [],
    components: { TabBar, DataList, workbenchesDialog },
    props: {},
    data () {
        return {
            show: false,
            title: '',
            active: 0,
            list: [
                { title: "待办事项", urlList: "actTask/todoList" },
                { title: "已办事项", urlList: "actTask/doneList" },
            ],
            url: {
                // 通过
                pass: '/actTask/pass',
                // 拒绝
                back: '/actTask/reject',
            },
            formModel: {
                // 优先级
                priority: '0', // 默认普通
                // 审批人
                assignees: '',
                // 发送消息通知
                msgSendType: 'message', // 默认通知
                // 当前任务ID
                currTaskId: '', // 当前任务ID，取businessModel.currTaskId
                // 驳回节点名称
                backTaskKey: '-1', // lims_contract_audit_node_0
                // 表单附加数据
                // formData: null
            },
        };
    },
    computed: {},
    watch: {},
    created () {
        this.handleLogin();
        // this.getList(this.url[this.list[this.active].urlList]);
    },
    mounted () { },
    methods: {
        handleConfirm (message, title) {
            console.log('留言内容:', message);
            let params = {
                assignees: this.formModel.assignees,
                backTaskKey: '-1',
                // 审批意见
                comment: message,
                id: this.formModel.id,
                businessId: this.formModel.businessId,
                priority: this.formModel.priority,
                procInstId: this.formModel.procInstId,
                msgSendType: this.formModel.msgSendType,
                // userId: this.formModel.userId,
                // formData: formData,
            }
            let url = ''
            if (title == '审批意见') {
                url = this.url.pass
                params.type = '0'
            } else if (title == '拒绝原因') {
                url = this.url.back
                params.type = '1'
            }

            postAction(url, params)
                .then((res) => {
                    console.log('流程处理结果：', res)
                    if (res.success) {
                        Notify({ type: 'success', message: res.message });

                        // 窗口不显示
                        // this.modalVisible = false
                        // 返回处理结果
                        // this.$emit('handleSubmit', res.result)
                        // this.handleCloseCurrentPage()
                    } else {
                        Notify({ type: 'success', message: res.message });
                    }
                })
                .finally(() => {
                    // 取消加载
                    // this.submitLoading = false
                    // this.$emit('handleLoadLoading', false)
                })
            console.log(params, 'params');
            this.show = false
        },

        handleAudit (item) {
            this.formModel.businessId = item.businessKey
            this.formModel.id = item.id
            this.formModel.procInstId = item.procInstId
            console.log(item, 'item');
            this.title = '审批意见'
            this.show = true
        },

        handleRefuse (item) {
            this.formModel.businessId = item.businessKey
            this.formModel.id = item.id
            this.formModel.procInstId = item.procInstId
            console.log(item, 'item');
            this.title = '拒绝原因'
            this.show = true
        },

        routerClick (item) {
            this.$router.push({
                path: "/layoutsDetails",
                query: { id: item.procInstId },
            });
        },
        ...mapActions(["Login"]),
        tabClick (item) {
            console.log(item);
        },
        //登录预留
        handleLogin () { },
        // getList() {
        // 	getAction(this.url,)
        // },
    },
};
</script>

<style scoped lang="scss">
.app-container {
    background: #f5f5f5;
    height: 100%;
    overflow-y: auto;
}

.layout-content {
    margin-bottom: 50px;

    .button_refuse {
        margin-left: 10px;
    }

    .cell_class {
        font-size: 14px;
        box-sizing: border-box;
        padding: 15px;
        background-color: #fff;
        margin-top: 10px;

        .cell_header {
            display: flex;
            justify-content: space-between;

            .divider {
                margin: 12px 0;
                border-bottom: 1px solid #000000;
            }

            h5 {
                font-size: 16px;
                color: #1e80ff;
                margin: 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                flex: 1;
            }

            p {
                width: 100px;
                text-align: center;
                margin: 0;

                .circular {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    display: inline-block;
                    background-color: #1e80ff;
                    vertical-align: middle;
                    margin-right: 5px;
                }

                span {
                    font-size: 14px;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>
